<template>
    <el-card class="border-none" shadow="never">
    
        <el-form
          ref="formRef"
          :model="formData"
          label-width="84px"
          :rules="formRules"
        >
        
          <el-form-item label="用户名" prop="username">
            <el-input v-model="formData.username" />
          </el-form-item>
          <el-form-item label="单图" prop="image">
            <la-uploader v-model="formData.image"  />
          </el-form-item>
          <el-form-item label="多图">
            <la-uploader v-model="formData.images" limit="3"></la-uploader>
          </el-form-item>
  
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="formData.nickname" />
          </el-form-item>
          <el-form-item label="富文本" prop="nickname">
            <la-editor v-model="formData.nickname" />
          </el-form-item>
  
          <el-form-item label="权重">
            <el-input type="number" v-model="formData.weigh" />
          </el-form-item>
        </el-form>
        {{ formData }}
 
      </el-card>
  </template>
  <script setup>
  import api from "@/lnk/admin/api";
  import laDialog from "@/lnk/components/la-dialog/index.vue";
  import { reactive, ref, computed,nextTick } from "vue";
  
  
  const emit = defineEmits(["success", "close"]);
  const dialogRef = ref(null);
  const formRef = ref(null);
  const mode = ref("add");
  const formData = reactive({
    username: "",
    nickname: "",
    images:['https://image.meiye.art/pic_1641213885791']
  });
  const formRules = reactive({});
  
  const dialogTitle = computed(() => {
    return mode.value == "edit" ? "编辑角色" : "新增角色";
  });
  
  const setFormData = async (row) => {
    const res = await api.admin.read({ id: row.id });
    for (const key in formData) {
      if (res.data[key] != null && res.data[key] != undefined) {
        formData[key] = res.data[key];
      }
    }
  };
  const open = (type = "add") => {
    mode.value = type;
    dialogRef.value.open();
    
   
    
  };
  const close = () => {
    formRef.value.resetFields()
    dialogRef.value.close();
  };
  const handleSubmit = async () => {
    if (mode == "add") {
      const res = await api.admin.create(formData);
    } else {
      const res = await api.admin.update(formData);
    }
  
    close();
    emit("success");
  };
  const handleClose = async () => {
    
    close();
  };
  defineExpose({
    open,
    setFormData,
  });
  </script>